<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :xl="16" :lg="14" :md="8" :sm="8">
          <div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i>&nbsp;{{
                name
              }}
            </div>
            <div class="explain">
              考核周期：{{ startDate }}-{{ endDate }} 被考核地区：{{
                assessAreaName
              }}
              <!-- <span>还剩<b>{{expireDate}}天</b>截止，截止后，将无法再自评举证</span> -->
            </div>
          </div>
        </el-col>
        <el-col :xl="8" :lg="10" :md="16" :sm="16">
          <div class="rightBox">
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ score }}</h3>
              <p class="scoreStyleInfo">总分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ selfEvaluateScore }}</h3>
              <p class="scoreStyleInfo">自评分</p>
            </div>
            <div>
              <el-button
                class="commonBut saveBtn funComBut fr"
                @click="toConfirm"
              >
                提交自评结果
              </el-button>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <div class="reminder">
      <i class="el-icon-warning"></i>
      <span
        >还剩 <b>{{ expireDate }}天</b>截止，截止后，将无法再自评举证</span
      >
      <!-- PC端需要使用身份证阅读器录入人员，如您不想购买身份证阅读器，可下载
        <el-link type="primary" id="downloadApp" @click="downloadApp">工匠365 企业版APP</el-link>录入人员 -->
    </div>
    <div class="mainCon">
      <!-- <el-table :data="tableList" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#333'}"
                highlight-current-row stripe style="border:1px solid #dfe6ec;" :cell-style="{color:'#333'}"> -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="typeName"
            label="类别"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column prop="itemName" label="考核项目" align="center" :formatter=formatTd></el-table-column>  -->
          <el-table-column prop="itemName" label="考核项目" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.itemName"
                :columnName="'itemName'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="content" label="考核事项" align="center"></el-table-column> -->
          <el-table-column prop="content" label="考核事项" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.content"
                :columnName="'content'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="标准分值" align="center">
            <template slot-scope="scope">
              {{ scope.row.referScore }}分
            </template>
          </el-table-column>
          <el-table-column label="自评" align="center">
            <template slot-scope="scope">
              {{
                scope.row.selfEvaluateScore == null ||
                scope.row.selfEvaluateScore == 0
                  ? '--'
                  : scope.row.selfEvaluateScore + '分'
              }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="left" :formatter="formatTd">
            <template slot-scope="scope">
              <el-link type="primary" @click="toEvalute(scope.row)"
                >自评举证</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <el-col :span="24" class="toolbar" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentTotal"
          >
          </el-pagination>
        </el-col>
      </div>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="提交自评"
      :visible.sync="selEvalutionDialog"
      width="30%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <span>您确认提交自评?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selEvalutionDialog = false" class="cancel"
          >取 消</el-button
        >
        <el-button type="primary" @click="selEvalutionDo" class="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'selfEvalutionProofList',
  mixins: [scrollTable],
  data() {
    return {
      id: '',
      assessAreaName: '',
      endDate: '',
      startDate: '',
      expireDate: '',
      name: '',
      total: '',
      score: '',
      selfEvaluateScore: 0, //自评分数
      assessEvaluateScore: '', //考核评定分数
      selEvalutionDialog: false,
      //表格数据
      tableList: [],
      filterField: {
        assessId: '',
      },
      currentPage: 1,
      pageSize: 20,
      currentTotal: 0,
      requestUrl: 'api-gov/assessdetail/expand/assessdetailpage',
      isShow: false, //列表加载
      loading: true,
    }
  },
  activated: function () {},
  created() {
    this.id = this.$route.query.id
    this.filterField.assessId = this.$route.query.id
    this.expireDate = this.$route.query.expireDate
    this.searchList()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchList()
    },
    // 搜索
    searchList() {
      this.axios({
        method: 'POST',
        url: this.requestUrl,
        data: {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          assessId: this.filterField.assessId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.tableList = response.data.result.page.results
            this.assessAreaName = response.data.result.assessAreaName
            this.startDate = response.data.result.startDate
            this.endDate = response.data.result.endDate
            this.expireDate = this.dateMinus(
              this.formatNowDate(),
              response.data.result.expireDate
            )
            this.name = response.data.result.name
            this.score =
              response.data.result.score == null ||
              response.data.result.score == 0
                ? '--'
                : response.data.result.score + '分'
            this.assessEvaluateScore =
              response.data.result.assessEvaluateScore == null ||
              response.data.result.assessEvaluateScore == 0
                ? '--'
                : response.data.result.assessEvaluateScore + '分'
            this.selfEvaluateScore =
              response.data.result.selfEvaluateScore == null ||
              response.data.result.selfEvaluateScore == 0
                ? '--'
                : response.data.result.selfEvaluateScore + '分'
            this.loading = false
            this.currentTotal = response.data.result.page.total
            if (this.tableList.length < 1) {
              this.isShow = true
            }
          }
        })
        .catch((error) => {})
    },
    dateMinus(date1, date2) {
      var sdate = new Date(date1)
      var now = new Date(date2)
      var days = now.getTime() - sdate.getTime()
      var day = parseInt(days / (1000 * 60 * 60 * 24))
      return day
    },
    formatNowDate() {
      var d = new Date(),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()
      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day
      return [year, month, day].join('-')
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/assessdetailpage',
        data: {
          pageNo: 1,
          pageSize: 9999,
          assessId: id,
        },
      })
        .then((response) => {
          this.loading = false

          this.tableList = response.data.result.results
          this.selfEvaluateScore = 0
          this.tableList.forEach((item) => {
            this.selfEvaluateScore =
              this.selfEvaluateScore + item.selfEvaluateScore
          })

          this.selfEvaluateScore =
            this.selfEvaluateScore == null || this.selfEvaluateScore == 0
              ? '--'
              : this.selfEvaluateScore + '分'

          if (this.tableList.length < 1) {
            this.isShow = true
          }
        })
        .catch((error) => {})
    },

    goBack() {
      this.getNum()
      this.$router.push({ name: 'checkSelfEvalution' })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkSelfEvalution',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getNum() {
      this.axios({
        method: 'post',
        url: 'api-gov/assess/expand/assessstat',
        data: {},
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$store.state.selfEvaluateNumber =
              response.data.result.selfEvaluateNumber
            this.$store.state.assessEvaluateNumber =
              response.data.result.assessEvaluateNumber
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    toConfirm() {
      this.selEvalutionDialog = true
    },
    selEvalutionDo() {
      this.selEvalutionDialog = false
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/submitselfassess',
        data: { assessId: this.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '提交成功',
            })
            this.goBack()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    DateMinus(date1, date2) {
      var sdate = new Date(date1)
      var now = new Date(date2)
      var days = now.getTime() - sdate.getTime()
      var day = parseInt(days / (1000 * 60 * 60 * 24))
      return day
    },
    toEvalute(rowData) {
      this.$router.push({
        path: '/home/checkAffairs/selfEvalutionResult',
        name: 'selfEvalutionResult',
        query: {
          id: rowData.id,
          assessId: this.id,
          expireDate: this.expireDate,
          name: this.name,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkSelfEvalution',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  // padding: 24px;
  .reminder {
    height: 40px;
    // line-height: 30px;
    color: #666;
    font-size: 14px;
    background: #fffbe6;
    border-radius: 3px;
    padding: 10px 20px;
    border: 1px solid #ffaa00;
    // margin: 24px 24px 0 24px;
    i {
      font-size: 20px;
      color: #ffaa00;
      margin-right: 10px;
      vertical-align: top;
    }
    span {
      font-size: 14px;
      color: #666;
      b {
        color: #ff0000;
      }
    }
  }
}
.mainColor {
  color: #009588;
}

.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 94px;
  padding: 10px 0 10px 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    padding-top: 14px;
    color: #333;
    .explain {
      padding: 5px 0 0 30px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
    }
  }
  .rightBox {
    text-align: center;
    float: right;
    div {
      float: left;
      &:first-child {
        margin-right: 10px;
      }
      &:nth-child(2) {
        margin-right: 24px;
      }
      &:nth-child(3) {
        padding-top: 18px;
      }
    }
  }
  .saveBtn {
    margin: 0 24px 0 0 !important;
  }
}

.mainCon {
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
</style>
